
<template>
    <div>
        <crumbs></crumbs>
        <div class="name"> 办理节点订制</div>
        <!-- search -->
        <div>
            <div class="top">
                <div class="left">
                    <el-select v-model="form.o_type" placeholder="机构类型" size="large" class="select" @change="search">
                        <el-option label="领导小组" value="领导小组" />
                        <el-option label="领导办公室 " value="领导办公室" />
                        <el-option label="服务功能组" value="服务功能组" />
                        <el-option label="调度室" value="调度室" />
                        <el-option label="助企单位" value="助企单位" />
                        <el-option label="工作队" value="工作队" />

                    </el-select>
                </div>
                <div class="left">
                    <el-select v-model="form.region" placeholder="区域类型" size="large" class="select" @change="search">
                        <el-option label="市级" value="市级" />
                    </el-select>
                </div>
                <div class="search">
                    <div class="right">
                        <el-input v-model="input" class="w" size="large" placeholder="请输入搜索关键字" />
                        <div class="button">
                            <el-button type="primary" class="btn" @click="search">搜索</el-button>
                        </div>
                    </div>
                    <div class="button1">
                        <el-button type="primary" class="btn1" @click="addApprove">新建结点</el-button>
                    </div>
                    <!-- 弹窗 -->
                    <el-dialog v-model="dialogFormVisible" title="新建节点">
                        <el-from v-model="formData">

                            <div class="input">
                                <p>节点序号：</p>
                                <el-input v-model="id" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p>节点名称：</p>
                                <el-input v-model="p_name" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p> 排序：</p>
                                <el-input v-model="sort" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p>超时时间：</p>
                                <el-input v-model="o_time" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p> 预警时间：</p>
                                <el-input v-model="y_time" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p>机构类型：</p>
                                <el-input v-model="o_type" placeholder="Please input" />
                            </div>
                            <div class="input">
                                <p>区域类型：</p>
                                <el-input v-model="region" placeholder="Please input" />
                            </div>
                        </el-from>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="addNode">保存</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>


            </div>
        </div>
        <!-- nodelist -->
        <div>
            <el-table :data="tableData" border style="width: 100%" #default="scope">
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="p_name" label="节点名称" align="center" />
                <el-table-column prop="o_type" label="机构类型" align="center" />
                <el-table-column prop="region" label="区域类型" align="center" />
                <el-table-column prop="o_time" label="超时时间" align="center" />
                <el-table-column prop="y_time" label="预警时间" align="center" />
                <el-table-column prop="sort" label="排序" align="center" />
                <el-table-column label="操作" align="center">


                    <template #default="scope">
                        <el-button type="danger" @click="edit(scope.$index, scope.row)">
                            修改
                        </el-button>
                        <el-button type="danger" @click="del(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page></page>
        </div>

        <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
            节点名称 <el-input v-model="inputxt.p_name" />
            机构类型<el-input v-model="inputxt.o_type" />
            区域类型<el-input v-model="inputxt.region" />
            超时时间<el-input v-model="inputxt.o_time" />
            预警时间<el-input v-model="inputxt.y_time" />
            排序<el-input v-model="inputxt.sort" />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDrawer">保存</el-button>
                    <el-button type="primary" @click="drawer = false">取消</el-button>
                </span>
            </template>
        </el-drawer>

        <div style="margin-left: 20px;" id="pageall">
            <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script>
import crumbs from "../../components/ServiceManagement/crumbs/crumbs.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue'
import page from '@/components/ServiceManagement/list/page.vue'
export default {
    name: "handlingProcedures",
    props: ['msg'],
    setup() {
        const id = ref("")
        const o_time = ref("")
        const p_name = ref("")
        const region = ref("")
        const sort = ref("")
        const y_time = ref("")
        const o_type = ref("")
        const formData = ref("")
        //search
        const input = ref("")

        // node
        let tableData = ref([])
        axios({
            url: "http://172.16.123.99:8080/node/findnodeList",
            method: "get",
            params: {
                limit: 1,
                currentPage: 1,
                pageSize: 10
            }
        }).then(
            resp => {
                console.log(resp.data.data);
                tableData.value = JSON.parse(resp.data.data)
            }
        )
        let drawer = ref(false)
        let inputxt = ref({
            id: "",
            p_name: "",
            o_type: "",
            region: "",
            o_time: "",
            y_time: "",
            sort: ""

        })

        const addDrawer = () => {
            console.log(inputxt.value.o_type,7777)
            drawer.value = false;
            axios({
                url: "http://172.16.123.99:8080/node/updatenodemsg",
                method: "post",
                params: {
                    o_time:inputxt.value.o_time,
                    o_type:inputxt.value.o_type,
                    p_name:inputxt.value.p_name,
                    region:inputxt.value.region,
                    sort:inputxt.value.sort,
                    y_time:inputxt.value.y_time,
                }
            }).then(
                resp => {
                    console.log("11111111", inputxt.id);
                    console.log(resp.data);

                }
            )
        }

        const edit = (a, b) => {
            drawer.value = true

            inputxt.value = b

        }
        const del = (index, row) => {
            ElMessageBox.confirm('确定删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: 'http://172.16.123.99:8080/node/delnodemsg',
                    method: 'post',
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        tableData.value.splice(index, 1)

                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                }).catch((err) => {
                    console.log('错误了', err);
                })
            }).catch(() => {
                //点击了取消按钮
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
        // const data = reactive({
        //     dialogFormVisible: false
        // })
        let dialogFormVisible = ref(false)
        const addApprove = () => {
            console.log("新建添加");
            // data.dialogFormVisible = true
            dialogFormVisible.value = true
        }

        const addNode = () => {
            console.log("addnode");
            dialogFormVisible.value = false;
            axios({
                url: "http://172.16.123.99:8080/node/addnodemsg",
                method: "post",
                params: {
                    id: id.value,
                    o_time: o_time.value,
                    o_type: o_type.value,
                    p_name: p_name.value,
                    region: region.value,
                    sort: sort.value,
                    y_time: y_time.value
                }
            }).then(
                resp => {
                    console.log(resp.data);
                    tableData.value.push({
                        id: id.value,
                        o_time: o_time.value,
                        o_type: o_type.value,
                        p_name: p_name.value,
                        region: region.value,
                        sort: sort.value,
                        y_time: y_time.value
                    })

                }
            )
        }

        let form = ref({
            region: "",
            o_type: ""
        })


        const search = () => {
            console.log(1111111111, form.value.region, form.value.o_type)
            axios({
                url: "http://172.16.123.99:8080/node/searchnodemsg",
                method: "post",
                params: {
                    region: form.value.region,
                    o_type: form.value.o_type,
                    currentPage: 1,
                    p_name: input.value,
                    pageSize: 10,
                    id: input.value,
                    sort: input.value,
                }
            }).then(
                resp => {
                    tableData.value = []
                    tableData.value = JSON.parse(resp.data.data)
                    console.log(tableData.value);
                    console.log(resp.data);
                }
            )
        }
        //分页
        let totallenght = ref()
        const page = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 5,
        });
        function GetUserData() {
            axios({
                url: 'http://172.16.123.99:8080/node/findnodeList',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    pageSize: page.pageSize,
                }
            }).then(resp => {
                tableData.value = JSON.parse(resp.data.data)
                console.log('00000000', resp.data)
                totallenght.value = resp.data.conut
                console.log(66666666666, totallenght.value)
            })
        }
        onMounted(() => {
            GetUserData()
        })
        const handleSizeChange = (val) => {
            page.pageSize = val
            console.log(val)
            GetUserData();
        }
        const handleCurrentChange = (val) => {
            page.pageNum = val
            console.log(val)
            GetUserData();
        }
        //3.导出   如果想要数据在外部渲染 必须得导出
        return {
            ref,
            addNode,
            del,
            tableData,
            ElMessage,
            ElMessageBox,
            input,
            drawer,
            inputxt,
            edit,
            addApprove,
            formData,
            dialogFormVisible,
            id,
            o_time,
            p_name,
            o_type,
            region,
            sort,
            y_time,
            search,
            addDrawer,
            form,
            totallenght,
            handleSizeChange,
            handleCurrentChange,
            page
        };
    },
    components: {
        crumbs,
    }
}
</script>
<style scoped>
.name {
    text-align: left;
    margin-top: 20px;
    font-weight: bold;
}

.top {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.select {
    width: 134px;
}

.right {
    display: flex;
}

.w {
    height: 38px;
}

.left {
    margin: 20px;
    display: flex;
    flex: 1;

}

.button {
    margin-left: 10px;
}

.btn {
    height: 38px;

}

.button1 {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;


}

.btn1 {
    height: 38px;
    float: right;

}

.search {
    display: flex;
    justify-content: space-between;
    flex: 8;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.elinput {
    width: 90%;
}

.select {
    width: 134px;
}
#pageall {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>